<template>
<div>

<el-card class="box-card" >
	<div slot="header" class="clearfix">
		<span>绩效</span>
	</div>

<el-container :style="{width : offsetwidth + 'px', height : offsetheight + 'px'}">
	<el-aside :width="'600px'">

		<span class="custom-tree-node">
			<span style="width:150px; ">&nbsp;</span>
			<span >
		        <span style="width:100px;" class="text-center mr20">未办结</span>
		        <span style="width:100px;" class="text-center mr20">已办结</span>
		        <span style="width:100px;" class="text-center mr20">超时办结</span>
		        <span style="width:100px;" class="text-center mr20">办结率</span>
		    </span>
		</span>
		
		<el-tree :data="treedata" 
		:expand-on-click-node="false"
		:default-expand-all="true"
		class="tree"
		node-key="id"
		:props="props1"
		v-if="showTree"
		:indent="20"
		:style="{height : offsetheight + 'px'}"
		>
	        <el-row style="width:100%;"  slot-scope="{ node, data }"
	        type="flex" justify="space-between"
	        >
        		<el-col :span="4" >
        			{{data.name}}
        		</el-col>
        		<el-col :span="18" >
					<div style="width:80px;" class="fr text-center">
						{{data.bjl}}
					</div>
					<div style="width:75px;" class="fr text-center">
						0
					</div>
					<div style="width:60px;" class="fr text-center">
						{{data.ybnum}}
					</div>
					<div style="width:70px;" class="fr text-center">
						{{data.dbnum}}
					</div>
        		</el-col>
	        </el-row>

		</el-tree>
	</el-aside>

</el-container>
</el-card>

</div>
</template>

<script>


export default {
	
	name : 'jixiao',
	
	data () {
		return {
		  	treedata : [],

		  	offsetheight : document.documentElement.clientHeight - 60 - 20 - 20,    //
			offsetwidth : document.documentElement.clientWidth - 200 - 50,
			props1 : {
				label : 'name',
			},
			showTree : false,
			top : {}, 

        
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {

	},

	methods : {
		init () {
			this.$http({
				fun : 'jixiao',
				cb : res => {
					console.log('jixiao');
					console.log(res);

					res.forEach(item => {
						const total = item.dbnum + item.ybnum;
						if(total == 0){
							item['bjl'] = '-';
						}else{
							item['bjl'] = parseFloat(item.ybnum / total).toFixed(2) * 100 + '%';
						}
					})
					
					const result = this.$util.transData(res, 'grid_id', 'parent_id', 'children');
					console.log(result);
					// this.top = result[0];
					this.treedata = result;
					this.showTree = true;

				}
			});
		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*justify-content: flex-start;*/
    font-size: 14px;
    padding-right: 8px;
  }
</style>
